<template>
  <div>
    <div>
      <div class="bg">
          <div class="main">
            <div class="main-bt iconfont icon-guanbi" @click="toMenu"></div>

              <div class="main-box" @click="toPage('index')">
                  <i class="iconfont icon-zhuye"></i>
                  <p>首页</p>
              </div>
              <div class="main-box" @click="toPage('logo')">
                  <i class="iconfont icon-nan"></i>
                  <p>logo</p>
              </div>
              <div class="main-box" @click="toPage('index')">
                  <i class="iconfont icon-biaodan"></i>
                  <p>笔记</p>
              </div>
              <div class="main-box" @click="toPage(0)">
                  <i class="iconfont icon-zhishiku"></i>
                  <p>博客</p>
              </div>
              <div class="main-box" @click="toPage('friendsLink')">
                  <i class="iconfont icon-lianjie"></i>
                  <p>友链</p>
              </div>
              
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        list:[
            {title:"首页",}
        ]
    };
  },

  methods:{

    // 滑动关闭菜单
    toMenu(){
      this.$emit("close")
    },


    // 跳转页面
    toPage(path){
      // 跳转博客网页
      if(path == 0){
        window.open('http://www.wangyinhao.com:8086/')
      }
      if(path == 'index'){
        this.toMenu()
      }else{
        this.$router.push(path)
      }
    }
  }
};
</script>

<style scoped lang="less">
.bg{
    display: flex;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;


}
.main{
  display: flex;
  width: 100%;
  height: 40%;
  // background-color: black;
  justify-content: space-around;
  .main-bt{
        position: absolute;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 50px;
    }
  .main-box{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    text-align: center;
    i{
      font-size: 150px;
    }
    p{
      color: white;
      font-size: 50px;
      
    }

  }
}
</style>
